<template>
    <div class="left-nav">
        <ul>
            <li class="active">
                <i class="icon iconfont icon-hanbao"></i>
                <div>收银</div>
            </li>
            <li>
                <i class="icon iconfont icon-dianpu-xianxing"></i>
                <div>店铺</div>
            </li>
            <li>
                <i class="icon iconfont icon-yinhangqia-xianxing"></i>
                <div>商品</div>
            </li>
            <li>
                <i class="icon iconfont icon-yonghu-xianxing"></i>
                <div>会员</div>
            </li>
            <li>
                <i class="icon iconfont icon-shezhi-xianxing"></i>
                <div>设置</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  
}
</script>

<style>
.left-nav{
    color: #fff;
    font-size: 16px;
    height: 100%;
    background-color: #1D8CE0;
    float: left;
    width: 80px;
}
.iconfont {
  font-size: 32px;
}

.left-nav ul {
  padding: 0px;
  margin: 0px;
}
.left-nav li.active{
  color: #6e8299;
  background: #E1F5FE;
}
.left-nav li {
  list-style: none;
  text-align: center;
  border-bottom: 1px solid #FFF;
  padding: 10px;
  cursor: pointer;
}
</style>

